<template>
    <div class="test-container">
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
            <el-button type="cancel">取消按钮</el-button>
            <el-button type="clear">清空按钮</el-button>
        </el-row>

        <el-row>
            <el-button plain>朴素按钮</el-button>
            <el-button type="primary" plain>主要按钮</el-button>
            <el-button type="success" plain>成功按钮</el-button>
            <el-button type="info" plain>信息按钮</el-button>
            <el-button type="warning" plain>警告按钮</el-button>
            <el-button type="danger" plain>危险按钮</el-button>
        </el-row>

        <el-row>
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
        </el-row>

        <el-row>
            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-row>

        <el-row>
            <status-span type="success">连接</status-span>
            <status-span type="warning">中断</status-span>
            <status-span type="danger">故障</status-span>
        </el-row>

        <el-row>
            <span class="btn-delete btn-span">
            </span>

            <span class="btn-edit btn-span">
            </span>

            <span class="btn-auth btn-span">
            </span>
        </el-row>

        <el-row>
            <!-- <edit-label :content.sync="content" focus></edit-label> -->
        </el-row>

        <el-row>
            <el-table :data="dataList" >
                <el-table-column label="Imei" min-width="180" prop="device_id" fixed="left">
                    <template slot-scope="scope">
                        Imei
                    </template>
                </el-table-column>
                <el-table-column label="设备Id" min-width="180" prop="device_id" >
                    <template slot-scope="scope">
                        设备Id
                    </template>
                </el-table-column>
                <el-table-column label="Rececive Raw" >
                    <template slot-scope="scope">
                       123456799
                    </template>
                </el-table-column>
                <el-table-column label="Time" width="170" fixed="right" >
                    <template slot-scope="scope">
                        2019-03-03
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <el-row>
            <el-pagination
                    @current-change="pageChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
    import editLabel from '@/components/edit-label'
    import statusSpan from '@/components/status-span'

    export default {
        components: {
            editLabel, statusSpan
        },

        data() {
            return {
                content: '',
                selectedOptions2: [],
                selectId: '',
                dataList: [
                    1, 2, 3, 4, 5, 6, 7
                ],

                currentPage: 1,
                pageSize: 1,
                total: 99,

            }
        },
        mounted() {

        },
        methods: {
            pageChange() {}
        }
    }
</script>

<style lang="scss" scoped>
    .test-container {
        padding: 10px;
    }
    .el-row {
        margin: 10px 0;
    }

</style>
